import { Menu } from "antd";
import React from "react";
import { RouterListChildren } from "../../rotuer";
import { useLocation, useNavigate } from "react-router-dom";
const Index = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation();
  const user = JSON.parse(localStorage.getItem("user"))|| {};
  // console.log(user);
  const renderMenu = (router) => {
    return router
      .filter((item) => {
        if (user.role === "admin") return true;
        if (!item.meta.role) return true;
        return item.meta.role.includes(user.role);
      })
      .map((v) => {
        return {
          key: v.path,
          label: v.meta.title,
          icon: v.meta.icon,
          children: v.children && renderMenu(v.children),
        };
      });
  };
  const items = renderMenu(RouterListChildren);

  return (
    <div>
      <Menu
        theme="dark"
        items={items}
        mode="inline"
        onSelect={({ key }) => navigate(key)}
        defaultOpenKeys={["/homea"]}
        selectedKeys={[pathname]}
      />
    </div>
  );
};

export default Index;
